<!DOCTYPE html>
<%@page pageEncoding="UTF-8"%>
<html>
<!-- 
  - Author(s): waffie
  - Date: 2020-08-21 15:55:35
  - Description:
-->
<head>
<title>template3</title>
<%@include file="/resource/template3.jsp"%>
</head>
<body>
<div class="sidebar">
    <div id="mainMenu"></div>
</div>
<div class="container">
    <div class="navbar">
        <div class="navbar-brand">系统模板3</div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-paper-plane"></i> 代办事项</a></li>
            <li><a href="#"><i class="fa fa-pencil-square-o"></i> 修改密码</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle userinfo">
                    <img class="user-img" src="<%=rootPath%>/resource/images/temp/user.jpg" />个人资料<i class="fa fa-angle-down"></i>
                </a>
                <ul class="dropdown-menu pull-right">
                    <li><a href="#"><i class="fa fa-eye "></i> 用户信息</a></li>
                    <li><a href="#"><i class="fa fa-user"></i> 退出登录</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="main">
        <div id="mainTabs" class="mini-tabs indexTabs" activeIndex="0" style="width:100%;height:100%;" plain="false"
                buttons="#tabsButtons" arrowPosition="side">
			<div name="index" iconCls="fa-android" title="首页" url="page/pageHome.jsp"></div>
        </div>
        <div id="tabsButtons">
            <a class="tabsBtn"><i class="fa fa-home"></i></a>
            <a class="tabsBtn"><i class="fa fa-refresh"></i></a>
            <a class="tabsBtn"><i class="fa fa-remove"></i></a>
            <a class="tabsBtn"><i class="fa fa-arrows-alt"></i></a>
        </div>
    </div>
</div>

<script type="text/javascript">
// 页面加载完成后执行
$(function(){
	// menu
	var menu = new Menu("#mainMenu", {
		itemclick: function (item) {
			if (!item.children) {
				activeTab(item);
			}
		}
	});
	
	$.ajax({
		url: "data/data_menu.txt",
		success: function (text) {
			var data = nui.decode(text);
			menu.loadData(data);
		}
	})

	//dropdown
	$(".dropdown-toggle").click(function (event) {
		$(this).parent().addClass("open");
		return false;
	});

	$(document).click(function (event) {
		$(".dropdown").removeClass("open");
	});
});

// tab选中
var activeTab = function(item) {
	var tabs = nui.get("mainTabs");
	var tab = tabs.getTab(item.id);
	if (!tab) {
		tab = { name: item.id, title: item.text, url: item.url, iconCls: item.iconCls, showCloseButton: true };
		tab = tabs.addTab(tab);
	}
	tabs.activeTab(tab);
}
</script>
</body>
</html>